<template>
	<view class="extensionCode">
		<view class="extensionCode_haber" :style="{ paddingTop: (top+30) + 'px' }">
			<tui-navigation-bar maxOpacity="0" :titleSize="18" :titleLineHeight="18" :titlefontWeight="800"   @init="initNavigation" title="我的推广码" backgroundColor="#fff" color="#000">
			 <view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
			   <tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
			 </view>
			</tui-navigation-bar>
			<view class="myExtensionCode">
					  <image class="bgImg" :src="ossUrl+'2025/02/04/eede8a378de243a0a5bda0287b81d9da.jpg'"></image>
					  <view class="myid">
						  <text>我的ID：{{userId}}</text>
					  </view>
					  <view class="qrCode">
						  <canvas 
						   :style="{ width: qrcode_w + 'px', height: qrcode_w + 'px' }"
						   canvas-id="couponQrcode"
						   id="couponQrcode"
						  ></canvas>
					  </view>
					  <image class="shareBg" src="../../../../static/user/my/button_shaare@2x.png"></image>
			</view>
		</view>
		 
	 
	</view>
</template>

<script> 
	import Cache from "@/utils/cache"; 
	import qrCode from '@/utils/weapp-qrcode.js';
	export default {
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				marginTp:0,
				userId:'',
				ossUrl: getApp().globalData.ossurl,//图片前缀
				qrcode_w: uni.upx2px(300)
			}
		},
		 onReady() {
		 	//需等canvas初始化完成才可执行方法
		 	//couponQrcode 为canvas-id
			let userId= Cache.get('userId')
			this.userId=userId
		 	new qrCode('couponQrcode', {
		 		text: userId,
		 		width: this.qrcode_w,
		 		height: this.qrcode_w,
		 		colorDark: '#333333',
		 		colorLight: '#FFFFFF',
		 		correctLevel: qrCode.CorrectLevel.H
		 	});
		 },
		methods: { 
			initNavigation(e) { 
			 		this.top = e.top;
					this.marginTp =   e.height
			 	},
			back() {
			 		uni.navigateBack({
							        delta: 1
							    });;
			 	}
	},
}
</script>

<style lang="scss" scoped>
@import './extensionCode.scss';
</style>